<template>
  <div class="container">
    <Navbar />
    
    <h1 class="page-title"><i class="fas fa-paw"></i> 宠物图鉴</h1>
    
    <!-- 筛选器 -->
    <div class="filters">
      <div class="filter-group">
        <label>类型</label>
        <select v-model="filters.type">
          <option value="">全部</option>
          <option value="攻击型">攻击型</option>
          <option value="防御型">防御型</option>
          <option value="辅助型">辅助型</option>
          <option value="速度型">速度型</option>
        </select>
      </div>
      <div class="filter-group">
        <label>稀有度</label>
        <select v-model="filters.rarity">
          <option value="">全部</option>
          <option value="传说">传说</option>
          <option value="稀有">稀有</option>
          <option value="普通">普通</option>
        </select>
      </div>
      <div class="filter-group">
        <label>评分</label>
        <select v-model="filters.rating">
          <option value="">全部</option>
          <option value="5">5星</option>
          <option value="4">4星以上</option>
          <option value="3">3星以上</option>
        </select>
      </div>
      <div class="filter-group">
        <label>资质</label>
        <select v-model="filters.quality">
          <option value="">全部</option>
          <option value="S级">S级</option>
          <option value="A级">A级</option>
          <option value="B级">B级</option>
          <option value="C级">C级</option>
        </select>
      </div>
      <div class="filter-actions">
        <button class="reset-btn" @click="resetFilters">重置</button>
        <button class="apply-btn" @click="applyFilters">应用筛选</button>
      </div>
    </div>
    
    <!-- 列表视图 -->
    <div class="list-view">
      <div class="list-header">
        <div class="view-options">
          <button :class="{ active: viewMode === 'grid' }" @click="viewMode = 'grid'">
            <i class="fas fa-th"></i>
          </button>
          <button :class="{ active: viewMode === 'list' }" @click="viewMode = 'list'">
            <i class="fas fa-list"></i>
          </button>
        </div>
        <div class="sort-options">
          <span>排序:</span>
          <select v-model="sortBy">
            <option value="popularity">热门程度</option>
            <option value="rating">评分高低</option>
            <option value="rarity">稀有度</option>
            <option value="power">战斗力</option>
          </select>
        </div>
      </div>
      
      <div :class="viewMode === 'grid' ? 'card-grid' : 'card-list'">
        <div v-for="(pet, index) in petList" :key="index" class="card" @click="$router.push(`/pet-detail/${index}`)">
          <div class="card-img" :style="{ backgroundColor: pet.bgColor }">
            <div class="card-badge">{{ pet.rarity }}</div>
          </div>
          <div class="card-content">
            <div class="card-title">{{ pet.name }}</div>
            <div class="card-meta">
              <div class="card-type">{{ pet.type }}</div>
              <div class="card-rating">
                <i class="fas fa-star"></i>
                <span>{{ pet.rating }} ({{ pet.ratingCount }})</span>
              </div>
            </div>
            <div v-if="viewMode === 'list'" class="card-details">
              <div class="detail-item">
                <span class="detail-label">基础技能:</span>
                <span class="detail-value">{{ pet.basicSkill }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">强化技能:</span>
                <span class="detail-value">{{ pet.enhancedSkill }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">战斗力:</span>
                <span class="detail-value">{{ pet.power }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分页 -->
      <div class="pagination">
        <button><i class="fas fa-angle-left"></i></button>
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>
        <button>...</button>
        <button>8</button>
        <button><i class="fas fa-angle-right"></i></button>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 宠物列表页组件
 * @component PetList
 */
import { ref, reactive } from 'vue'
import Navbar from '../../components/Navbar.vue'

// 视图模式（网格/列表）
const viewMode = ref('grid')
// 排序方式
const sortBy = ref('popularity')

// 筛选条件
const filters = reactive({
  type: '',
  rarity: '',
  rating: '',
  quality: ''
})

// 重置筛选
const resetFilters = () => {
  Object.keys(filters).forEach(key => {
    filters[key] = ''
  })
}

// 应用筛选
const applyFilters = () => {
  // 这里可以添加筛选逻辑，根据filters对petList进行过滤
  console.log('应用筛选：', filters)
}

// 宠物列表数据
const petList = ref([
  { 
    name: '小白龙', 
    type: '辅助型', 
    rarity: '传说', 
    rating: '4.9', 
    ratingCount: '135', 
    bgColor: '#fd7e14',
    basicSkill: '瞬间加速（提升10%加速度）',
    enhancedSkill: '龙息护盾（10秒防护罩效果）',
    power: 9600,
    quality: 'S级'
  },
  { 
    name: '幻想猫', 
    type: '攻击型', 
    rarity: '稀有', 
    rating: '4.8', 
    ratingCount: '112', 
    bgColor: '#0dcaf0',
    basicSkill: '幻影突袭（干扰视野3秒）',
    enhancedSkill: '幻影分身（制造假目标干扰对手）',
    power: 8200,
    quality: 'A级'
  },
  { 
    name: '机械龟', 
    type: '防御型', 
    rarity: '普通', 
    rating: '4.6', 
    ratingCount: '89', 
    bgColor: '#20c997',
    basicSkill: '坚硬外壳（减少碰撞伤害20%）',
    enhancedSkill: '龟壳反弹（将攻击效果反弹给敌人）',
    power: 7800,
    quality: 'B级'
  },
  { 
    name: '幻翼天马', 
    type: '速度型', 
    rarity: '稀有', 
    rating: '4.7', 
    ratingCount: '104', 
    bgColor: '#e83e8c',
    basicSkill: '疾风冲刺（短时间提升20%速度）',
    enhancedSkill: '天马之翼（获得短暂飞行能力）',
    power: 8500,
    quality: 'A级'
  },
  { 
    name: '九尾狐', 
    type: '攻击型', 
    rarity: '传说', 
    rating: '4.8', 
    ratingCount: '118', 
    bgColor: '#6f42c1',
    basicSkill: '狐火（对周围敌人造成持续伤害）',
    enhancedSkill: '九尾幻影（制造幻影迷惑敌人）',
    power: 9200,
    quality: 'S级'
  },
  { 
    name: '机械鼠', 
    type: '辅助型', 
    rarity: '普通', 
    rating: '4.3', 
    ratingCount: '67', 
    bgColor: '#6c757d',
    basicSkill: '加速齿轮（临时提升引擎效率）',
    enhancedSkill: '机械陷阱（在赛道上布置干扰装置）',
    power: 7200,
    quality: 'B级'
  },
  { 
    name: '火焰狮', 
    type: '攻击型', 
    rarity: '稀有', 
    rating: '4.5', 
    ratingCount: '96', 
    bgColor: '#dc3545',
    basicSkill: '烈焰冲击（对前方敌人造成伤害）',
    enhancedSkill: '火焰领域（在周围创造火焰区域）',
    power: 8300,
    quality: 'A级'
  },
  { 
    name: '星际龙', 
    type: '速度型', 
    rarity: '传说', 
    rating: '4.9', 
    ratingCount: '128', 
    bgColor: '#198754',
    basicSkill: '星际推进（大幅提升氮气效果）',
    enhancedSkill: '时空跃迁（短暂进入无敌状态）',
    power: 9800,
    quality: 'S级'
  }
])
</script>

<style scoped>
.page-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #0078ff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
}

.filter-group {
  display: flex;
  flex-direction: column;
}

.filter-group label {
  font-size: 14px;
  margin-bottom: 5px;
  color: #555;
}

.filter-group select, .filter-group input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  grid-column: 1 / -1;
}

.filter-actions button {
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.apply-btn {
  background: #0078ff;
  color: white;
}

.reset-btn {
  background: #eee;
  color: #333;
}

.list-view {
  margin-top: 20px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.view-options {
  display: flex;
  gap: 10px;
}

.view-options button {
  background: #f5f5f5;
  border: none;
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
}

.view-options button.active {
  background: #0078ff;
  color: white;
}

.sort-options {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sort-options select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card-list .card {
  display: flex;
  align-items: center;
}

.card-list .card-img {
  width: 120px;
  min-width: 120px;
  height: 120px;
}

.card-list .card-content {
  flex: 1;
}

.card-details {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.detail-item {
  font-size: 14px;
  color: #666;
}

.detail-value {
  margin-left: 5px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 10px;
}

.pagination button {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.pagination button.active {
  background: #0078ff;
  color: white;
  border: none;
}
</style> 